<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>首页-维修确定-双欧</title>
  <meta name="description"
        content="码力兄弟是按需用IT人才“Uber”，快准好的匹配合适的人解决企业产品技术问题，通过匹配技术咨询顾问、技术开发团队、驻场用人、全职用人甚至技术VC等一站式为企业提供技术服务解决方案的平台"/>
  <meta name="keywords" content="码力兄弟,众包,软件众包,软件外包,项目外包,项目需求,程序员接活,兼职,私活,软件开发,小程序"/>
  <meta name="copyright" content="上海易推信息科技有限公司"/>
  <meta name="author" content="evil_web（429391294@qq.com）"/>
  <link rel="stylesheet" type="text/css" href="css/city.css"/>
  <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
  <link rel="stylesheet" type="text/css" href="css/base.css"/>
  <link rel="stylesheet" type="text/css" href="css/common.css"/>
  <link rel="stylesheet" type="text/css" href="css/index.css"/>
  <!--[if lte IE 9]>
  <script type="text/javascript" src="js/html5shiv-printshiv-3.js"></script>
  <![endif]-->
</head>
<body>

<div class="bg">
  <!--公共头部 header start-->
  <header class="header-index">
    <div class="container posR">
      <a href="javascript:;" class="logo">
        <img src="images/logo.png" alt="">
      </a>
      <div class="top-address">
        <span class="location">上海</span>
        <a href="javascript:;" class="change-city">
          切换城市
          <span class="icon bg-btn_arrow_down_line_n"></span>
        </a>
        <p class="more-city-notice">
          您正在浏览上海市双鸥服务，是否 <a href="javascript:;" class="color-blue show-city">切换城市？</a>
          <a href="javascript:;" class="close bg-btn_close_n"></a>
        </p>
        <div class="top-more-city none">
          <span class="city-item">北京</span>
          <span class="city-item city-item-select">上海</span>
          <span class="city-item">广州</span>
          <span class="city-item">深圳</span>
          <span class="city-item">杭州</span>
          <span class="city-item">天津</span>
          <span class="city-item">成都</span>
          <span class="city-item">西安</span>
          <span class="city-item">武汉</span>
          <span class="city-item">重庆</span>
          <span class="city-item">南京</span>
          <a href="javascript:;" class="city-item-more">更多城市＞</a>
        </div>
      </div>
      <div class="header-right">
        <span class="message">我的消息</span>
        <span class="user-name">上海ZARA <em class="icon bg-btn_arrow_down_line_n"></em></span>
        <div class="user-bar bg-bg_xialacaidan none">
          <a href="javascript:;">订单管理</a>
          <a href="javascript:;">地址管理</a>
          <a href="javascript:;">发票管理</a>
          <a href="javascript:;">意见反馈</a>
          <a href="javascript:;">退出登录</a>
        </div>
        <span class="welcome-back">欢迎回来：</span>

      </div>
    </div>
  </header>
  <!--公共头部  header end-->

  <div class="container main">
    <div class="bj-container">
      <div class="bj-tab-box">
        <!--<a href="javascript:;" class="bj-tab-item bj-tab-item_hover" data-id="101">办公场所</a>-->
        <a href="javascript:;" class="bj-tab-item " data-id="101">办公场所</a>
        <a href="javascript:;" class="bj-tab-item" data-id="201">店铺</a>
        <a href="javascript:;" class="bj-tab-item" data-id="301">公寓</a>
        <a href="javascript:;" class="bj-tab-item" data-id="401">其他场所</a>
      </div>
      <div class="layui-form-box-bj">
        <form class="layui-form layui-form-bj" action="">
          <div class="layui-form-item">
            <label class="layui-form-label"> <em class="color-red">*</em>维修类目(多选)：</label>
            <div class="layui-input-block">
              <div class="service-type-box">
                <!--<a href="javascript:;" class="service-type-item service-type-item-class service-type-item_hover"> <span></span>办公椅（2）</a>-->
                <a href="javascript:;" class="service-type-item service-type-item-class"> <span></span>办公椅</a>
                <a href="javascript:;" class="service-type-item service-type-item-class"> <span></span>窗户</a>
                <a href="javascript:;" class="service-type-item service-type-item-class"> <span></span>窗帘</a>
                <a href="javascript:;" class="service-type-item service-type-item-class"> <span></span>资料柜</a>
                <a href="javascript:;" class="service-type-item service-type-item-class"> <span></span>墙体</a>
                <a href="javascript:;" class="service-type-item service-type-item-class"> <span></span>办公桌</a>
                <a href="javascript:;" class="service-type-item service-type-item-class"> <span></span>电器类</a>
                <a href="javascript:;" class="service-type-item service-type-item-class"> <span></span>黑板</a>
                <a href="javascript:;" class="service-type-item service-type-item-class"> <span></span>天花板</a>
                <a href="javascript:;" class="service-type-item service-type-item-class"> <span></span>沙发</a>
                <a href="javascript:;" class="service-type-item service-type-item-class"> <span></span>地毯</a>
              </div>
            </div>
          </div>
          <!--专项清洁-->
          <div class="layui-form-item layui-form-item-zxqj">
            <label class="layui-form-label"><em class="color-red">*</em>维修详细(多选)：</label>
            <div class="layui-input-block" style="width:940px;">
             <div class="pro-maintain">
               <!--椅子-->
               <div class="item layui-form-item-index" data-name="椅子">
                 <div class="item-top item-top-office item-top-chair">
                   <!--<a href="javascript:;" class="pro-detail-item pro-chair-item-cz pro-detail-item_hover">材质</a>-->
                   <a href="javascript:;" class="pro-detail-item pro-chair-item-cz">材质</a>
                   <a href="javascript:;" class="pro-detail-item pro-chair-item-kb">靠背</a>
                   <a href="javascript:;" class="pro-detail-item pro-chair-item-fs">扶手</a>
                   <a href="javascript:;" class="pro-detail-item pro-chair-item-ls">螺丝</a>
                   <a href="javascript:;" class="pro-detail-item pro-chair-item-zd">坐垫</a>
                   <a href="javascript:;" class="pro-detail-item pro-chair-item-sjq">升降器</a>
                   <a href="javascript:;" class="pro-detail-item pro-chair-item-lz">轮子</a>
                 </div>
               </div>

               <!--窗户-->
               <div class="item layui-form-item-index none" data-name="窗户">
                 <div class="item-top item-top-office item-top-window">
                   <a href="javascript:;" class="pro-detail-item pro-window-item-cz">表面材质</a>
                   <a href="javascript:;" class="pro-detail-item pro-window-item-mz">门轴</a>
                   <a href="javascript:;" class="pro-detail-item pro-window-item-ls">螺丝</a>
                   <a href="javascript:;" class="pro-detail-item pro-window-item-sb">手柄</a>
                   <a href="javascript:;" class="pro-detail-item pro-window-item-ljq">连接器</a>
                   <a href="javascript:;" class="pro-detail-item pro-window-item-sk">锁孔</a>
                   <a href="javascript:;" class="pro-detail-item pro-window-item-gd">轨道</a>
                 </div>
               </div>

               <!--窗帘-->
               <div class="item layui-form-item-index none" data-name="窗帘">
                 <div class="item-top item-top-office item-top-curtain">
                   <a href="javascript:;" class="pro-detail-item pro-curtain-item-cz">表面材质</a>
                   <a href="javascript:;" class="pro-detail-item pro-curtain-item-jz">卷轴</a>
                   <a href="javascript:;" class="pro-detail-item pro-curtain-item-lx">拉线</a>
                 </div>
               </div>

               <!--资料柜-->
               <div class="item layui-form-item-index none" data-name="资料柜">
                 <div class="item-top item-top-office item-top-fileCabinet">
                   <a href="javascript:;" class="pro-detail-item pro-fileCabinet-item-cz">表面材质</a>
                   <a href="javascript:;" class="pro-detail-item pro-fileCabinet-item-ls">螺丝</a>
                   <a href="javascript:;" class="pro-detail-item pro-fileCabinet-item-mb">门  柄</a>
                   <a href="javascript:;" class="pro-detail-item pro-fileCabinet-item-sk">锁  孔</a>
                   <a href="javascript:;" class="pro-detail-item pro-fileCabinet-item-ys">钥  匙</a>
                   <a href="javascript:;" class="pro-detail-item pro-fileCabinet-item-sct">锁插头</a>
                   <a href="javascript:;" class="pro-detail-item pro-fileCabinet-item-mz">门  轴</a>
                 </div>
               </div>

               <!--墙面-->
               <div class="item layui-form-item-index none" data-name="墙面">
                 <div class="item-top item-top-office item-top-wall">
                   <a href="javascript:;" class="pro-detail-item pro-wall-item-fs">粉刷</a>
                   <a href="javascript:;" class="pro-detail-item pro-wall-item-kl">开裂</a>
                 </div>
               </div>

               <!--办公桌-->
               <div class="item layui-form-item-index none" data-name="办公桌">
                 <div class="item-top item-top-office item-top-desk">
                   <a href="javascript:;" class="pro-detail-item pro-desk-item-cz ">表面材质</a>
                   <a href="javascript:;" class="pro-detail-item pro-desk-item-ys">钥  匙</a>
                   <a href="javascript:;" class="pro-detail-item pro-desk-item-ct">抽  屉</a>
                   <a href="javascript:;" class="pro-detail-item pro-desk-item-mg">门  柜</a>
                   <a href="javascript:;" class="pro-detail-item pro-desk-item-lz">轮  子</a>
                 </div>
               </div>

               <!--电器类-->
               <div class="item item-add layui-form-item-index none" data-name="电器类">
                 <div class="item-top item-top-add item-top-add-ele">
                   <a href="javascript:;" class="pro-detail-item pro-add-item">电话机</a>
                   <a href="javascript:;" class="pro-detail-item pro-add-item">电视机</a>
                   <a href="javascript:;" class="pro-detail-item pro-add-item">空调</a>
                   <a href="javascript:;" class="pro-detail-item pro-add-item">净水器</a>
                   <a href="javascript:;" class="pro-detail-item pro-add-item">冰箱</a>
                   <a href="javascript:;" class="pro-detail-item pro-add-item">服务器机柜</a>
                 </div>
               </div>

               <!--黑板-->
               <div class="item layui-form-item-index none" data-name="黑板">
                 <div class="item-top item-top02 item-top-board">
                   <a href="javascript:;" class="pro-detail-item pro-board-item-zj">支  架</a>
                 </div>
                 <a href="javascript:;" class="item-btn">
                   确定
                 </a>
               </div>

               <!--天花板-->
               <div class="item layui-form-item-index none" data-name="天花板">
                 <div class="item-top item-top-office item-top-ceiling">
                   <a href="javascript:;" class="pro-detail-item pro-ceiling-item-bmtl">表面脱落</a>
                 </div>
               </div>

               <!--沙发-->
               <div class="item layui-form-item-index none" data-name="沙发">
                 <div class="item-top item-top02 item-top-sofa">
                   <a href="javascript:;" class="pro-detail-item pro-sofa-item-cz">材质</a>
                   <a href="javascript:;" class="pro-detail-item pro-sofa-item-kb">靠背</a>
                   <a href="javascript:;" class="pro-detail-item pro-sofa-item-fs">扶手</a>
                   <a href="javascript:;" class="pro-detail-item pro-sofa-item-th">弹簧</a>
                   <a href="javascript:;" class="pro-detail-item pro-sofa-item-sft">沙发腿</a>
                 </div>
               </div>

               <!--地毯-->
               <div class="item layui-form-item-index none" data-name="地毯">
                 <div class="item-top item-top02 item-top-carpet">
                   <a href="javascript:;" class="pro-detail-item pro-carpet-item-dt">地毯</a>
                 </div>
               </div>

             </div>
            </div>
          </div>

          <div class="layui-form-item">
            <label class="layui-form-label layui-form-label2"><em class="color-red">*</em> 故障描述：</label>
            <div class="layui-input-block">
              <textarea name="apprise-text" class="apprise-text mt0" id="" cols="30" onkeyup="cls(this,200,'v')" maxlength="200" oncontextmenu="cls(this,200,'v')" placeholder="可备注商品型号、损坏情况以及原因等内容" rows="10"></textarea>
              <div class="apprise-text-max-length">您还可以输入 <span id="count">200</span> 个文字</div>
            </div>
          </div>

          <div class="layui-form-item">
            <div class="layui-input-block">
              <a href="javascript:;" class="upload-from-pro">从商品库中选择</a>
              <div class="upload-from-local-wrapper">
                <a href="javascript:;" class="upload-from-local fl" id="test2">+本地上传</a>
                <span class="upload-from-local-text">按住Ctrl可多选图片，支持JPG/JPEG/PNG格式，图片大小不超过5M</span>
              </div>
              <div class="appraise-file-box">
                <div class="layui-upload">
                  <div class="layui-upload-list" id="demo2">
                  </div>
                  <!--<button type="button" class="layui-btn layui-btn-upload bg-btn_addpic_n">多图片上传</button>-->
                </div>
              </div>
            </div>
          </div>

          <hr class="hr-line-solid">
          <div class="layui-form-item">
            <div class="layui-input-block">
              <button class="layui-btn btn3" lay-submit="" lay-filter="demo1">下一步</button>
            </div>
          </div>
        </form>
      </div>

    </div>
  </div>
</div>
<!--公共底部  footer start-->
<footer>
  <div class="container">
    <div class="footer-left">
      <dl class="footer-link footer-link-server">
        <dt>双欧服务平台</dt>
        <dd><a href="javascript:;">保洁服务</a></dd>
        <dd><a href="javascript:;">维修服务</a></dd>
        <dd><a href="javascript:;">绿植服务</a></dd>
        <dd><a href="javascript:;">净化服务</a></dd>
      </dl>
      <dl class="footer-link footer-link-about">
        <dt>关于双鸥</dt>
        <dd><a href="javascript:;">双鸥介绍</a></dd>
        <dd><a href="javascript:;">联系我们</a></dd>
        <dd><a href="javascript:;">服务反馈</a></dd>
        <dd><a href="javascript:;">平台协议</a></dd>
      </dl>
      <dl class="footer-link footer-link-about">
        <dt>市场合作</dt>
        <dd><a href="javascript:;">成为企业用户</a></dd>
        <dd><a href="javascript:;">申请加入我们</a></dd>
      </dl>
    </div>
    <div class="footer-right">
      <div class="contact-info">
        <span class="tel">TEL: 021-55235501</span>
        <span class="work-time">(周一至周五 10:00-19:00)</span>
          <span class="contact">
            邮箱：Info@serviceo2o.com<br>传真：021-55235512
          </span>
      </div>
      <div class="qr">
        <img src="images/qr.jpg" alt="">
        <span class="text">【关注双鸥公众号】</span>
      </div>
    </div>
  </div>
  <div class="footer-btm">
    <div class="container">
      <span class="icon footer-logo bg-pic_footer_shuangou">双欧</span>
      <span class="text">Copyright © 2018 SOA 双鸥环境服务  版权所有</span>
    </div>
  </div>
</footer>
<!--公共头部  footer end-->
<div class="mask none"></div>
<!--pop start-->
<div class="pop pop-city none">
  <a href="javascript:;" class="close bg-btn_close_n"></a>
  <p class="top-tit">
    <span class="bg-logo_popup"></span>
  </p>
  <div class="cont">
    <div class="pop-city-row">
      <p class="name">当前位置：</p>
      <p class="intro">
        <span class="city-item">上海</span>
      </p>
    </div>

    <div class="pop-city-row">
      <p class="name">热门城市：</p>
      <p class="intro">
        <span class="city-item">北京</span>
        <span class="city-item city-item-select">上海</span>
        <span class="city-item">广州</span>
        <span class="city-item">深圳</span>
        <span class="city-item">杭州</span>
        <span class="city-item">天津</span>
        <span class="city-item">成都</span>
        <span class="city-item">西安</span>
        <span class="city-item">武汉</span>
        <span class="city-item">重庆</span>
        <span class="city-item">南京</span>
        <span class="city-item">郑州</span>
        <span class="city-item">济南</span>
        <span class="city-item">厦门</span>
      </p>
    </div>
    <div class="pop-city-row">
      <p class="name name-city">选择城市：</p>
      <div class="intro">
        <div class="infolist">
          <div class="liststyle">
          <span id="Province">
              <i>省</i>
              <ul>
                <li><a href="javascript:void(0)" alt="请选择省">请选择省</a></li>
              </ul>
              <input type="hidden" name="cho_Province" value="请选择省">
          </span>
          <span id="City">
              <i>市</i>
              <ul>
                <li><a href="javascript:void(0)" alt="请选择市">请选择市</a></li>
              </ul>
              <input type="hidden" name="cho_City" value="请选择市">
          </span>
          <span id="Area" style="display: none">
              <i>区</i>
              <ul>
                <li><a href="javascript:void(0)" alt="请选择区">请选择区</a></li>
              </ul>
              <input type="hidden" name="cho_Area" value="请选择区">
          </span>
          </div>
        </div>
      </div>
    </div>
    <div class="pop-btn-box">
      <a href="javascript:;" class="pop-cancel">取消</a>
      <a href="javascript:;" class="pop-submit">确定</a>
    </div>
  </div>
</div>
<!--pop end-->

<!--pop 确定切换场所-->
<div class="pop pop-change none" style="margin-top:-200px;">
  <a href="javascript:;" class="close bg-btn_close_n"></a>
  <p class="top-tit">
    <span class="bg-logo_popup"></span>
  </p>
  <div class="cont">
    <p class="tit01">
      确定切换场所？
    </p>
    <p class="intro01">
      切换场所会导致已选择的类目清空<br>
      您需要重新进行选择
    </p>
    <div class="pop-btn-box">
      <a href="javascript:;" class="pop-cancel">取消</a>
      <a href="javascript:;" class="pop-submit">确定</a>
    </div>
  </div>
</div>
<!--pop 确定切换场所 end-->

<!--pop 双鸥商品库-->
<div class="pop pop-library none">
  <a href="javascript:;" class="close bg-btn_close_n"></a>
  <p class="top-tit">
    <span class="span03">双鸥商品库</span>
  </p>
  <div class="cont">
    <div class="pro-class-box">
      <div id="product">
        <span class="next">》》</span>
        <div id="content">
          <div class="service-type-box" id="content_list">
            <a href="javascript:;" class="service-type-item service-type-item-pro service-type-item_hover"> <span></span>沙发（2）</a>
            <a href="javascript:;" class="service-type-item service-type-item-pro"> <span></span>抽油烟机</a>
            <a href="javascript:;" class="service-type-item service-type-item-pro"> <span></span>办公桌</a>
            <a href="javascript:;" class="service-type-item service-type-item-pro"> <span></span>办公椅</a>
            <a href="javascript:;" class="service-type-item service-type-item-pro"> <span></span>沙发</a>
            <a href="javascript:;" class="service-type-item service-type-item-pro"> <span></span>沙发</a>
            <a href="javascript:;" class="service-type-item service-type-item-pro"> <span></span>沙发</a>
            <a href="javascript:;" class="service-type-item service-type-item-pro"> <span></span>沙发</a>
            <a href="javascript:;" class="service-type-item service-type-item-pro"> <span></span>沙发</a>
            <a href="javascript:;" class="service-type-item service-type-item-pro"> <span></span>沙发</a>
          </div>
        </div>
      </div>

    </div>
    <div class="pro-list-box">
      <a href="javascript:;" class="pro-item">
        <img src="images/pic_others.png" alt="">
        <span class="text">单人沙发</span>
      </a>
      <a href="javascript:;" class="pro-item">
        <img src="images/pic_others.png" alt="">
        <span class="text">单人沙发</span>
      </a>
      <a href="javascript:;" class="pro-item">
        <img src="images/pic_others.png" alt="">
        <span class="text">单人沙发</span>
      </a>
      <a href="javascript:;" class="pro-item">
        <img src="images/pic_others.png" alt="">
        <span class="text">单人沙发</span>
      </a>
      <a href="javascript:;" class="pro-item">
        <img src="images/pic_others.png" alt="">
        <span class="text">单人沙发</span>
      </a>
      <a href="javascript:;" class="pro-item">
        <img src="images/pic_others.png" alt="">
        <span class="text">单人沙发</span>
      </a>
      <a href="javascript:;" class="pro-item">
        <img src="images/pic_others.png" alt="">
        <span class="text">单人沙发</span>
      </a>
      <a href="javascript:;" class="pro-item">
        <img src="images/pic_others.png" alt="">
        <span class="text">单人沙发</span>
      </a>
      <a href="javascript:;" class="pro-item">
        <img src="images/pic_others.png" alt="">
        <span class="text">单人沙发</span>
      </a>
      <a href="javascript:;" class="pro-item">
        <img src="images/pic_others.png" alt="">
        <span class="text">单人沙发</span>
      </a>
    </div>
    <div class="pro-list-box none">
      <a href="javascript:;" class="pro-item">
        <img src="images/pic_others.png" alt="">
        <span class="text">单人沙发</span>
      </a>
      <a href="javascript:;" class="pro-item">
        <img src="images/pic_others.png" alt="">
        <span class="text">单人沙发</span>
      </a>
      <a href="javascript:;" class="pro-item">
        <img src="images/pic_others.png" alt="">
        <span class="text">单人沙发</span>
      </a>
      <a href="javascript:;" class="pro-item">
        <img src="images/pic_others.png" alt="">
        <span class="text">单人沙发</span>
      </a>
      <a href="javascript:;" class="pro-item">
        <img src="images/pic_others.png" alt="">
        <span class="text">单人沙发</span>
      </a>
      <a href="javascript:;" class="pro-item">
        <img src="images/pic_others.png" alt="">
        <span class="text">单人沙发</span>
      </a>
      <a href="javascript:;" class="pro-item">
        <img src="images/pic_others.png" alt="">
        <span class="text">单人沙发</span>
      </a>
      <a href="javascript:;" class="pro-item">
        <img src="images/pic_others.png" alt="">
        <span class="text">单人沙发</span>
      </a>
      <a href="javascript:;" class="pro-item">
        <img src="images/pic_others.png" alt="">
        <span class="text">单人沙发</span>
      </a>
      <a href="javascript:;" class="pro-item">
        <img src="images/pic_others.png" alt="">
        <span class="text">单人沙发</span>
      </a>
    </div>
    <div id="page" class="page-box"></div>
    <div class="pop-btn-box pop-btn-box2">
      <a href="javascript:;" class="pop-submit">确定</a>
    </div>
  </div>
</div>
<!--pop 双鸥商品库 end-->

<!--购物车-->
<div class="side-bar">
  <div class="cart-box none">
    <div class="cart-item-wrapper">

      <a href="javascript:;" class="cart-item">
        <img class="cart-item-img" src="images/img_estate.jpg" alt="">
        <div class="cart-item-cont">
          <p class="name">小绿萝【清新空气办公桌必备…</p>
          <p class="info">大：口径20cm  高20cm   <span class="num">x1</span></p>
          <p class="money">￥10.00/月</p>
        </div>
      </a>
      <a href="javascript:;" class="cart-item">
        <img class="cart-item-img" src="images/img_estate.jpg" alt="">
        <div class="cart-item-cont">
          <p class="name">小绿萝【清新空气办公桌必备…</p>
          <p class="info">大：口径20cm  高20cm   <span class="num">x1</span></p>
          <p class="money">￥10.00/月</p>
        </div>
      </a>
      <a href="javascript:;" class="cart-item">
        <img class="cart-item-img" src="images/img_estate.jpg" alt="">
        <div class="cart-item-cont">
          <p class="name">小绿萝【清新空气办公桌必备…</p>
          <p class="info">大：口径20cm  高20cm   <span class="num">x1</span></p>
          <p class="money">￥10.00/月</p>
        </div>
      </a>
    </div>
    <div class="cart-all">
      <span class="num">x9</span>
      <span class="money">总计:￥10,300.00/月</span>
      <a href="javascript:;" class="pay-btn">去结算</a>
    </div>
  </div>
  <a href="javascript:;" class="shopping-cart bg-btn_cart_plant_n"></a>
  <i class="shopping-amount">5</i>
  <a href="javascript:;" class="back-top bg-btn_backtop_n none"></a>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/swiper.min.js"></script>
<script type="text/javascript" src="js/city.min.js"></script>
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/index.js"></script>

<script>
  (function (){

    var the_cookieString =  $.cookie('the_cookie');
    var the_parent_cookieString =  $.cookie('the_parent_cookie');
    var the_cookie_arr = JSON.parse(the_cookieString);  //获取cookie  商品数组
    var the_parent_cookie_arr = JSON.parse(the_parent_cookieString);  //获取cookie  商品数组
    var the_catName = $.cookie('the_catName');          //获取cookie  页面参数
    console.log(the_cookie_arr);
    console.log(the_parent_cookie_arr);

    var proListData;

    var index_id = '299';//页面加载设置初始默认 productId =299  (椅子)
    getProList(index_id);

    //获取维修类目
    var officeListData = {};
    var officeListHtml ='';
    $.ajax({
      type:'POST',
      url:'http://10.128.203.15:8080/find/cat/name.do',
      data:{catName:the_catName},
      dataType:'jsonp',
      jsonp:'jsoncallback',
      success:function(data){
        officeListData = data;
        for(var i=0;i<officeListData.length;i++){
          var num = 0;
          var nowHtml='';
          if(the_parent_cookie_arr.length){
            for(var j =0; j< the_parent_cookie_arr.length; j++){
              if(num == 0){
                if(officeListData[i].cat_id == the_parent_cookie_arr[j].cat_id){
                  num++;
                  nowHtml = '<a href="javascript:;" class="service-type-item service-type-item-class service-type-item_hover" data-id="'+officeListData[i].cat_id+'"><span></span>'+officeListData[i].name+'（'+num+'）</a>';
                }else {
                  num = 0;
                  nowHtml = '<a href="javascript:;" class="service-type-item service-type-item-class" data-id="'+officeListData[i].cat_id+'"><span></span>'+officeListData[i].name+'</a>';
                }
              }else{
                if(officeListData[i].cat_id == the_parent_cookie_arr[j].cat_id){
                  num++;
                  nowHtml = '<a href="javascript:;" class="service-type-item service-type-item-class service-type-item_hover" data-id="'+officeListData[i].cat_id+'"><span></span>'+officeListData[i].name+'（'+num+'）</a>';
                }
              }

            }

          }else {
            nowHtml = '<a href="javascript:;" class="service-type-item service-type-item-class" data-id="'+officeListData[i].cat_id+'"><span></span>'+officeListData[i].name+'</a>';
          }
          officeListHtml += nowHtml;
        }
        $('.service-type-box').html(officeListHtml);

      },
      error:function () {//请求失败后调用的函数
        alert("error");
      },
      failure: function() {
        alert('fail');
      }
    });




    function getProList(index_id){
      {
        var $item_index = $(".layui-form-item-index"),
            proData,
            proHtml;
        $item_index.hide();
        $.ajax({
          type:'POST',
          url:'http://10.128.203.15:8080/find/cat/parentsId.do',
          data:{parentsId:index_id},
          dataType:'jsonp',
          jsonp:'jsoncallback',
          success:function(data){
            proData = data;
            var parent_cat_name;
            for(var i=0;i<proData.length;i++){
              parent_cat_name = proData[i].cat_name;
              var proClassName01,proClassNameClass;
              switch(parent_cat_name)
              {
                case '天花板':
                  proClassName01 = 'pro-ceiling-item-';
                  break;
                case '椅子':
                  proClassName01 = 'pro-chair-item-';
                  break;
                case '窗户':
                  proClassName01 = 'pro-window-item-';
                  break;
                case '窗帘':
                  proClassName01 = 'pro-curtain-item-';
                  break;
                case '桌子':
                  proClassName01 = 'pro-desk-item-';
                  break;
                case '资料柜':
                  proClassName01 = 'pro-fileCabinet-item-';
                  break;
                case '墙面':
                  proClassName01 = 'pro-wall-item-';
                  break;
                case '沙发':
                  proClassName01 = 'pro-sofa-item-';
                  break;
                case '地毯':
                  proClassName01 = 'pro-carpet-item-';
                  break;
                case '木质门':
                  proClassName01 = 'pro-woodenDoor-item-';
                  break;
                case '玻璃门':
                  proClassName01 = 'pro-glassDoor-item-';
                  break;
                case '踢脚线':
                  proClassName01 = 'pro-skirting-item-';
                  break;
                case '射灯':
                  proClassName01 = 'pro-spotlight-item-';
                  break;
                case '日光灯':
                  proClassName01 = 'pro-sunlight-item-';
                  break;
                case '前台':
                  proClassName01 = 'pro-reception-item-';
                  break;
                case '楼梯':
                  proClassName01 = 'pro-stairs-item-';
                  break;
                case '下水道':
                  proClassName01 = 'pro-sewer-item-';
                  break;
                case '水槽':
                  proClassName01 = 'pro-sink-item-';
                  break;
                case '黑板':
                  proClassName01 = 'pro-board-item-';
                  break;
                case '抽屉柜':
                  proClassName01 = 'pro-drawer-item-';
                  break;
                default:
                  proClassName01 = '';
              }
              var parent_cat_name02 = proData[i].name;
              switch(parent_cat_name02)
              {
                case '表面材质':
                  proClassNameClass = proClassName01+'cz';
                  break;
                case '表面脱落':
                  proClassNameClass = proClassName01+'bmtl';
                  break;
                case '门轴':
                  proClassNameClass = proClassName01+'mz';
                  break;
                case '螺丝':
                  proClassNameClass = proClassName01+'ls';
                  break;
                case '手柄':
                  proClassNameClass = proClassName01+'sb';
                  break;
                case '连接器':
                  proClassNameClass = proClassName01+'ljq';
                  break;
                case '锁孔':
                  proClassNameClass = proClassName01+'sk';
                  break;
                case '轨道':
                  proClassNameClass = proClassName01+'gd';
                  break;
                case '卷轴':
                  proClassNameClass = proClassName01+'jz';
                  break;
                case '拉线':
                  proClassNameClass = proClassName01+'lx';
                  break;
                case '钥匙':
                  proClassNameClass = proClassName01+'ys';
                  break;
                case '抽屉':
                  proClassNameClass = proClassName01+'ct';
                  break;
                case '门柜':
                  proClassNameClass = proClassName01+'mg';
                  break;
                case '轮子':
                  proClassNameClass = proClassName01+'lz';
                  break;
                case '材质':
                  proClassNameClass = proClassName01+'cz';
                  break;
                case '靠背':
                  proClassNameClass = proClassName01+'kb';
                  break;
                case '扶手':
                  proClassNameClass = proClassName01+'fs';
                  break;
                case '坐垫':
                  proClassNameClass = proClassName01+'zd';
                  break;
                case '升降器':
                  proClassNameClass = proClassName01+'sjq';
                  break;
                case '门柄':
                  proClassNameClass = proClassName01+'mb';
                  break;
                case '锁插头':
                  proClassNameClass = proClassName01+'sct';
                  break;
                case '粉刷':
                  proClassNameClass = proClassName01+'fs';
                  break;
                case '开裂':
                  proClassNameClass = proClassName01+'kl';
                  break;
                case '弹簧':
                  proClassNameClass = proClassName01+'th';
                  break;
                case '沙发腿':
                  proClassNameClass = proClassName01+'sft';
                  break;
                case '地毯':
                  proClassNameClass = proClassName01+'dt';
                  break;
                case '闭门器':
                  proClassNameClass = proClassName01+'bmq';
                  break;
                case '门把手':
                  proClassNameClass = proClassName01+'mbs';
                  break;
                case '踢脚线':
                  proClassNameClass = proClassName01+'tjx';
                  break;
                case '灯芯':
                  proClassNameClass = proClassName01+'dx';
                  break;
                case '启辉器':
                  proClassNameClass = proClassName01+'qhq';
                  break;
                case '镇流器':
                  proClassNameClass = proClassName01+'zlq';
                  break;
                case '灯管':
                  proClassNameClass = proClassName01+'dg';
                  break;
                case '灯罩':
                  proClassNameClass = proClassName01+'dz';
                  break;
                case '层板':
                  proClassNameClass = proClassName01+'cb';
                  break;
                case '下水道':
                  proClassNameClass = proClassName01+'xsd';
                  break;
                case '水槽':
                  proClassNameClass = proClassName01+'sc';
                  break;
                case '支架':
                  proClassNameClass = proClassName01+'zj';
                  break;

                default:
                  proClassNameClass = 'pro-add-item';
              }

//              加载商品详细分类
              var num = 0;
              var nowHtml='';
              if(the_parent_cookie_arr.length){
                for(var j =0; j< the_parent_cookie_arr.length; j++){
                  if(num == 0){
                    if(proData[i].goods_id == the_parent_cookie_arr[j].productid){
                      num++;
                      nowHtml = '<a href="javascript:;" class="pro-detail-item pro-detail-item_hover '+proClassNameClass+'" data-parent="'+proData[i].cat_id+'" data-id="'+proData[i].goods_id+'">'+proData[i].name+'</a>';
                    }else {
                      num = 0;
                      nowHtml = '<a href="javascript:;" class="pro-detail-item '+proClassNameClass+'" data-parent="'+proData[i].cat_id+'" data-id="'+proData[i].goods_id+'">'+proData[i].name+'</a>';
                    }
                  }else{
                    if(proData[i].goods_id == the_parent_cookie_arr[j].productid){
                      num++;
                      nowHtml = '<a href="javascript:;" class="pro-detail-item pro-detail-item_hover '+proClassNameClass+'" data-parent="'+proData[i].cat_id+'" data-id="'+proData[i].goods_id+'">'+proData[i].name+'</a>';
                    }
                  }

                }

              }else {
                nowHtml = '<a href="javascript:;" class="pro-detail-item '+proClassNameClass+'" data-parent="'+proData[i].cat_id+'" data-id="'+proData[i].goods_id+'">'+proData[i].name+'</a>';
              }

              proHtml += nowHtml
            }
            console.log(parent_cat_name);
            $('.pro-maintain>.item').each(function (index,domEle){
              if($(domEle).attr('data-name') == parent_cat_name){
                if(proClassName01){
                  $(domEle).find('.item-top').html(proHtml).removeClass('item-top-add');
                }else {
                  $(domEle).find('.item-top').html(proHtml).addClass('item-top-add');
                }
                $item_index.eq(index).show();
              }
            });

          },
          error:function () {//请求失败后调用的函数
            alert("error");
          },
          failure: function() {
            alert('fail');
          }
        });
      }
    }

    $(".upload-from-pro").click(function(){
      $(".mask,.pop-library").show();
    });

    $(".service-class-item-wrapper").click(function(){
      $(this).addClass('service-class-item-wrapper_hover').siblings().removeClass('service-class-item-wrapper_hover');
    });

//  点击*维修类目(多选)
    $(".service-type-box").delegate(".service-type-item-class", "click", function(){
      var $this = $(this);
      $this.addClass('service-type-item_hover').siblings().removeClass('service-type-item_hover');
      var index_id =  $this.attr('data-id');
      getProList(index_id);
    });

//    var goods_arr = [];

    $(".item-top").delegate(".pro-detail-item", "click", function(){
      var $this = $(this);
      var _goods_id = $this.attr('data-id');
      var _parent_id = $this.attr('data-parent');
//      console.log(_goods_id);
//      console.log(_parent_id);
      console.log(typeof (parseInt(_goods_id)));
      var good_info = {};
      good_info.productid = parseInt(_goods_id);
      good_info.price = 0;
      good_info.num = 1;
//      good_info.cat_id = _parent_id;

      var good_parent_info = {};
      good_parent_info.productid = parseInt(_goods_id);
      good_parent_info.cat_id = parseInt(_parent_id);

//      console.log(good_info);
      var goods_arrString;
      var goods_parent_arrString;
      if($this.hasClass('pro-detail-item_hover')){

        removeObjWithArr(the_cookie_arr,good_info);
        removeObjWithArr(the_parent_cookie_arr,good_parent_info);

        console.log(the_cookie_arr);
        console.log(the_parent_cookie_arr);

        goods_arrString = JSON.stringify(the_cookie_arr); //JSON 数据转化成字符串
        $.cookie('the_cookie', goods_arrString);

        goods_parent_arrString = JSON.stringify(the_parent_cookie_arr); //JSON 数据转化成字符串
        $.cookie('the_parent_cookie', goods_parent_arrString);
      }else {
        the_cookie_arr.push(good_info);
        the_parent_cookie_arr.push(good_parent_info);

        console.log(the_cookie_arr);

        goods_arrString = JSON.stringify(the_cookie_arr); //JSON 数据转化成字符串
        $.cookie('the_cookie', goods_arrString);

        goods_parent_arrString = JSON.stringify(the_parent_cookie_arr); //JSON 数据转化成字符串
        $.cookie('the_parent_cookie', goods_parent_arrString);
      }
      $this.toggleClass('pro-detail-item_hover');
      var parentHtml = $this.parent().parent().attr('data-name');
      $('.service-type-item').each(function (index,domEle){
        var matchHtml = $(domEle).text().split('（')[0];
        if(matchHtml == parentHtml){
          var maintainNum = $this.parent().find('.pro-detail-item_hover').length;
          if(maintainNum>0){
            $('.service-type-item-class').eq(index).addClass('service-type-item_hover').html('<span></span>'+matchHtml+"（"+maintainNum+"）");
          }else {
            $('.service-type-item-class').eq(index).removeClass('service-type-item_hover').html('<span></span>'+matchHtml);
          }
        }
      });

      function removeObjWithArr (_arr,_obj) {
        var length = _arr.length;
        for(var i = 0; i < length; i++)
        {
          if(isObjectValueEqual(_arr[i], _obj))
          {
            if(i == 0)
            {
              _arr.shift(); //删除并返回数组的第一个元素
              return;
            }
            else if(i == length-1)
            {
              _arr.pop();  //删除并返回数组的最后一个元素
              return;
            }
            else
            {
              _arr.splice(i,1); //删除下标为i的元素
              return;
            }
          }
        }
      }
      /*    var index = $this.parent().parent().index();
       var matchHtml = $('.service-type-item-class').eq(index).html().split('（')[0];
       $this.toggleClass('pro-detail-item_hover');
       var maintainNum = $this.parent().find('.pro-detail-item_hover').length;
       if(maintainNum>0){
       $('.service-type-item-class').eq(index).addClass('service-type-item_hover').html(matchHtml+"（"+maintainNum+"）");
       }else {
       $('.service-type-item-class').eq(index).removeClass('service-type-item_hover').html(matchHtml);
       }*/
    });


    $(".bj-tab-item").click(function(){
      var $this = $(this);
      var id = $this.attr('data-id');
      $(".mask,.pop-change").show();
      $(".pop-cancel").click(function(){
        $(".mask,.pop-change").hide();
        return false;
      });
//    $(".pop-submit").click(function(){
      $(".pop-submit").off("click").on("click",function(){
        $(".mask,.pop-change").hide();
        $this.addClass('bj-tab-item_hover').siblings().removeClass('bj-tab-item_hover');
        alert(id)
      });

    });
    $(".pro-item").click(function(){
      var $this = $(this);
      $this.toggleClass('pro-item_hover')
    });


    function isObjectValueEqual(a, b) {
      if(typeof a == 'number' && typeof b == 'number'){
        return a == b
      }


      var aProps = Object.getOwnPropertyNames(a);
      var bProps = Object.getOwnPropertyNames(b);

      if (aProps.length != bProps.length) {
        return false;
      }

      for (var i = 0; i < aProps.length; i++) {
        var propName = aProps[i];
        if(Object.prototype.toString(a[propName]) == '[Object Object]'||Object.prototype.toString(b[propName]) == '[Object Object]'){
          isObjectValueEqual(a[propName],b[propName])
        }
        if (a[propName] !== b[propName]) {
          return false;
        }
      }
      return true;
    }

  })();

</script>
<script>
  layui.use(['form', 'layedit', 'laydate','upload','laypage'], function(){
    var form = layui.form
        ,$ = layui.jquery
        ,laypage = layui.laypage
        ,upload = layui.upload
        ,layer = layui.layer
        ,layedit = layui.layedit
        ,laydate = layui.laydate;

    laypage.render({
      elem: 'page'
      ,count: 100
      ,theme: '#1E9FFF'
    });
    //多图片上传
    upload.render({
      elem: '#test2'
      ,url: '/upload/'
      ,multiple: true
      ,before: function(obj){
        //预读本地文件示例，不支持ie8
        obj.preview(function(index, file, result){
          $('#demo2').append('<div class="apprise-img-box"><img src="'+ result +'" alt="'+ file.name +'"><span></span></div>')
        });
      }
      ,done: function(res){
        //上传完毕
      }
    });

    //日期
    laydate.render({
      elem: '#date'
      ,type: 'datetime'
    });
    laydate.render({
      elem: '#date1'
    });

    //创建一个编辑器
    var editIndex = layedit.build('LAY_demo_editor');

    //自定义验证规则
    form.verify({
      title: function(value){
        if(value.length < 5){
          return '标题至少得5个字符啊';
        }
      }
      ,pass: [/(.+){6,12}$/, '密码必须6到12位']
      ,content: function(value){
        layedit.sync(editIndex);
      }
    });

    //监听指定开关
    form.on('switch(switchTest)', function(data){
      layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
        offset: '6px'
      });
      layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
    });

    //监听提交
    form.on('submit(demo1)', function(data){
      layer.alert(JSON.stringify(data.field), {
        title: '最终的提交信息'
      })
      return false;
    });

  });
</script>

<script type="text/javascript">
  function cls(obj,max,v){
    var str=obj.value;//全换成单字节字符计算
    var v=document.getElementById('count');

    if(str.length>max){

    }else{
      v.innerHTML=max-str.length;
    }
  }
</script>

</body>
</html>